<template>
    <div class="modify-score">
        <!-- 查询学生 -->
        <header class="modify-header">
            <div class="left">
                <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                <span>|</span>
                <span>{{ action }}作业</span>
            </div>
            <div class="right">
                课程管理系统
            </div>
        </header>
        <main class="modify-main">
            <!-- 作业信息 -->
            <div class="score-table-container">
                <el-form :label-position="'right'" label-width="80px" :model="form" :rules="rules" ref="form"
                    class="form-table">
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截止时间" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="作业类型" prop="assignmentType">
                        <el-select v-model="form.assignmentType" placeholder="请选择课程类型">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作业内容" prop="assignmentContent">
                        <el-input type="textarea" :rows="4" placeholder="请输入作业内容" v-model="form.assignmentContent">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="text-align: right;">
                            <el-button type="primary" @click="confirm()" icon="el-icon-check">{{ action }}作业</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

        </main>
    </div>
</template>

<script>
import { addAssignmentAPI, editAssignmentAPI, queryAssignmentAPI } from '@/api/assignment'
import moment from 'moment';


export default {
    // name: 'timeTable',
    data() {
        return {
            action: '发布',
            courseId: '',
            teacherId: '',
            assignmentId: '',
            assignment: {},
            form: {
                courseId: '',
                teacherId: '',
                assignmentType: '',
                assignmentContent: '',
                startTime: '',
                endTime: '',
                state: '',
            },
            // 作业类型
            options: [{
                value: '平时作业',
                label: '平时作业'
            }, {
                value: '期末作业',
                label: '期末作业'
            }],
            rules: {
                assignmentType: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                assignmentContent: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                startTime: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                endTime: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            }
        }
    },
    created() {

    },
    mounted() {
        // 传过来的数据
        this.form.courseId = this.$route.query.courseId
        this.form.teacherId = this.$route.query.teacherId
        this.assignmentId = this.$route.query.assignmentId
        this.assignment = this.$route.query.assignment
        this.getAssignment()
    },
    methods: {
        // 编辑数据回显
        getAssignment() {
            // console.log(this.form.courseId);
            // console.log(this.form.teacherId);
            // console.log(this.assignmentId);
            // console.log(this.assignment);
            if (this.assignmentId !== '') {
                this.action = '修改'
                // 传过来的数据一刷新就没有了，用请求来的数据
                // this.form = this.assignment
                queryAssignmentAPI(this.assignmentId).then((res) => {
                    if (res.code === 200) {
                        this.form = res.data
                    }else{
                        this.$message.error('获取该作业信息失败！')
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            }
        },
        // 确认
        confirm() {
            // 时间格式化
            this.form.startTime = moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss');
            this.form.endTime = moment(this.form.endTime).format('YYYY-MM-DD HH:mm:ss');
            console.log(this.form);
            if (this.form.startTime > this.form.endTime) {
                this.$message.error('开始时间不能大于截止时间！')
                return
            }
            // 调用表单的 validate 方法进行验证
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 如果验证通过，执行下一步操作
                    // 这里可以添加提交表单数据的代码
                    if (this.form.startTime == 'Invalid date' || this.form.endTime == 'Invalid date') {
                        this.$message.error('时间不能为空！')
                        return
                    }
                    // 新增 addHandle时 携带的assignmentId: ''
                    if (this.assignmentId === '') {
                        addAssignmentAPI(this.form).then((res) => {
                            if (res.code === 200) {
                                this.$message.success('添加作业成功！')
                                // 跳回作业管理
                                this.$router.push({ path: '/assignments', query: { courseId: this.form.courseId, teacherId: this.form.teacherId } });

                            } else {
                                this.$message.error('添加作业失败！')
                            }
                        }).catch((error) => {
                            console.log(error);
                        })
                    } else {
                        // 编辑
                        // Body参数
                        const bodyData = {
                            startTime: this.form.startTime,
                            endTime: this.form.endTime,
                            assignmentType: this.form.assignmentType,
                            assignmentContent: this.form.assignmentContent,
                            state: this.form.state,
                        }
                        editAssignmentAPI(this.assignmentId, bodyData).then((res) => {
                            if (res.code === 200) {
                                this.$message.success('修改该作业成功！')
                                this.$router.push({ path: '/assignments', query: { courseId: this.form.courseId, teacherId: this.form.teacherId } });
                            } else {
                                this.$message.error('修改该作业失败！')
                            }
                        }).catch((error) => {
                            this.log(error)
                        })
                    }

                } else {
                    // 如果验证不通过，可以弹出提示或者进行其他操作
                    console.log('验证失败');
                    this.$message.error('输入信息不能为空！')
                    return false;
                }
            });


        }

    }
}
</script>

<style lang="scss" scoped>
//主容器
.timetable-containe {
    position: relative;
}

//作业表
.score-table-container {
    margin-top: 50px;
    margin-right: 10px;
    margin-bottom: 50px;
    margin-left: 10px;
    border-style: groove;
    border-spacing: 5px;

    /* 增加边框之间的间距 */
    .form-table {
        margin: 5%;
    }
}

.modify-score {
    background-color: #f4f6f8;
    height: 100vh;
    // border-style: solid;

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .modify-main {
        background: #f4f6f8;
        padding: 20px 450px;

        .form-container {
            background-color: #fff;
            padding-left: 300px;
            padding-right: 300px;
            padding-bottom: 100px;


            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }
    }
}
</style>
